<template>
	<view class="tab_bar_item" :style="{'background-color': backgroundColor}">
		<view class="page_tab_bar">
			<block v-for="(item,index) in tabList" :key="index">
				<view class="tab_item p-r" @tap.stop="switchTab(index)">
					<image class="icon" :src="currentTabIndex == index?item.selectedIconPath:item.iconPath"></image>
					<text class="iconfont" :class="currentTabIndex == index&&'home_active'">
						{{item.text}}
					</text>
					<text v-if="index==2&&readingCount>0" :class="['p-a','red_dot',readingCount>99?'w_35':'']">{{readingCount>99?'99+':readingCount}}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
const app = getApp();
import {toPage} from '@/static/uitls/common.js';
	export default {
		props: {
			current: {
				type: [Number,String],
				default: 0
			},
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
		},
		mounted() {
			
			this.observe(app.globalData, 'readingCount', this.watchRedDot); // 开启监听消息待读数量变化
		},
		data() {
			return {
				readingCount:0,
				tabList: [{
						text: '首页',
						iconPath: "/static/image/tab_icon/home.png",
						selectedIconPath: "/static/image/tab_icon/home_active.png"
					},
					{
						text: '课表',
						iconPath: "/static/image/tab_icon/view.png",
						selectedIconPath: "/static/image/tab_icon/view_active.png"
					},
					{
						text: '消息',
						iconPath: "/static/image/tab_icon/message.png",
						selectedIconPath: "/static/image/tab_icon/message_active.png"
					},
					{
						text: '我的',
						iconPath: "/static/image/tab_icon/people.png",
						selectedIconPath: "/static/image/tab_icon/people_active.png"
					},
				],
				currentTabIndex: this.current
			}
		},
		watch: {
			current(newVal) {
				this.currentTabIndex = newVal||0
			},
			backgroundColor(value){
				this.backgroundColor = value||'transparent'
				// console.log(value)
			}
		},
		methods: {
			switchTab(index) {
				toPage('/pages/index/index',{},index)
				this.currentTabIndex =index
			},
			watchRedDot(val,newVal){
				this.readingCount = newVal
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_bar_item,.page_tab_bar{
		width: 750rpx;
		height: calc(constant(safe-area-inset-bottom) + 98rpx);
		height: calc(env(safe-area-inset-bottom) + 98rpx);
	}
	.tab_bar_item{
		position: fixed;
		left: 0rpx;
		bottom: 0;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		// z-index: 2000;
		z-index: 10;
		background-color:transparent;
	}
	.page_tab_bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(146, 84, 255, 0.1);
		border-radius: 56rpx 56rpx 0rpx 0rpx;
		overflow: hidden;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	// .navigator {
	// }
	.tab_item {
		padding:5rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.icon {
		width: 56rpx;
		height: 56rpx;
	}

	.iconfont {
		font-size: 18rpx;
		line-height: 26rpx;
		color: #d8dbed;
	}

	.home_active {
		color: #ab65ff;
	}
</style>
